<template>
  <section>
    <!--新建、编辑、查看学生信息-->
    <el-dialog :title="title" :visible="show" width="1000px" @close="changeStatus" @closed="clearStudentInfo('data')">
      <!-- <el-form :disabled="isDisabled" :model="data" :rules="rulesInfo" ref="data" label-width="120px">
        <div style="color: #333;font-size: 16px;margin-bottom: 10px;">基础信息</div>
        <section class="clear">
          <section class="fl">
            <el-form-item label="学号：" prop="sn" class="w450">
              <el-input size="mini" v-model="data.sn" autocomplete="off" placeholder="请输入学号" :disabled="type==='update'"></el-input>
            </el-form-item>
            <el-form-item label="姓名：" prop="name" class="w450">
              <el-input size="mini" v-model="data.name" autocomplete="off" placeholder="请输入姓名" :disabled="type==='update'"></el-input>
            </el-form-item>
            <section class="clear">
              <el-form-item label="性别：" prop="gender" class="fl" style="width: 230px">
                <el-radio-group v-model="data.gender">
                  <el-radio v-for="item in genderOption" :key="item.value" :label="item.value">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="民族：" prop="nationId" class="fl" style="width: 220px">
                <el-select size="mini" v-model="data.nationId" placeholder="请选择">
                  <el-option :key="index" v-for="(item,index) in nations" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </section>
            <section class="clear">
              <el-form-item label="政治面貌：" prop="politicalStatus" class="fl" style="width: 230px">
                <el-select size="mini" v-model="data.politicalStatus" placeholder="请选择">
                  <el-option :key="index" v-for="(item,index) in politicStatus" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="籍贯：" prop="nativePlaceId" class="fl" style="width: 220px">
                <el-select size="mini" v-model="data.nativePlaceId" placeholder="请选择">
                  <el-option :key="index" v-for="(item,index) in provinces" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </section>
          </section>
          <section class="fr">
            <el-upload class="avatar-uploader" action="./api/common/uploadFile" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="data.picUrl" :src="data.picUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </section>
        </section>
        <section class="clear">
          <el-form-item label="身份证件类型：" prop="idType" class="w450 fl">
            <el-select size="mini" v-model="data.idType" class="w330" placeholder="请选择身份证件类型">
              <el-option :key="index" v-for="(item,index) in idTypes" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="角色：" prop="role" class="fl">
            <el-input size="mini" v-model="data.role" :disabled="true" autocomplete="off" placeholder="请输入角色"></el-input>
          </el-form-item>
        </section>
        <section class="clear">
          <el-form-item label="证件号码：" prop="idNumber" class="w450 fl">
            <el-input size="mini" v-model="data.idNumber" autocomplete="off" placeholder="请输入证件号码"></el-input>
          </el-form-item>
          <el-form-item label="宗教信仰：" prop="religion" class="fl">
            <el-input size="mini" v-model="data.religion" autocomplete="off" placeholder="请输入宗教信仰"></el-input>
          </el-form-item>
        </section>
        <section class="clear">
          <el-form-item label="出生日期：" prop="birthDate" class="w450 fl">
            <el-date-picker size="mini" v-model="data.birthDate" type="date" placeholder="选择出生日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="饮食习惯：" prop="dietaryHabit" class="fl">
            <el-input size="mini" v-model="data.dietaryHabit" autocomplete="off" placeholder="请输入饮食习惯"></el-input>
          </el-form-item>
        </section>
        <section class="clear">
          <el-form-item label="入学年月：" prop="enterDate " class="w450 fl">
            <el-date-picker size="mini" v-model="data.enterDate " type="date" placeholder="选择入学年月">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="校区：" prop="campusId" class="fl">
            <el-select size="mini" v-model="data.campusId" placeholder="请选择校区" style="width: 178px">
              <el-option :key="index" v-for="(item,index) in campus" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </section>
        <section class="clear">
          <el-form-item label="毕业年月(预计)：" prop="graduateDate" class="w450 fl">
            <el-date-picker size="mini" v-model="data.graduateDate " type="date" placeholder="选择毕业年月">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="特长爱好：" prop="hobby" class="fl">
            <el-input size="mini" v-model="data.hobby" autocomplete="off" placeholder="请输入特长爱好"></el-input>
          </el-form-item>
        </section>
        <el-form-item label="宿舍号：" prop="dorm" class="w450">
          <el-input size="mini" v-model="data.dorm" autocomplete="off" placeholder="请输入宿舍号"></el-input>
        </el-form-item>
        <div style="color: #333;font-size: 16px;margin-bottom: 10px;">本人学籍信息</div>
        <section class="clear">
          <el-form-item label="学院：" prop="college" class="w450 fl">
            <el-input size="mini" v-model="data.college" :disabled="true" autocomplete="off" placeholder="请输入学院"></el-input>
          </el-form-item>
          <el-form-item label="专业：" prop="major" class="fl">
            <el-input size="mini" v-model="data.major" :disabled="true" autocomplete="off" placeholder="请输入专业"></el-input>
          </el-form-item>
        </section>
        <section class="clear">
          <el-form-item label="年级：" prop="grade" class="w450 fl">
            <el-input size="mini" v-model="data.grade" :disabled="true" autocomplete="off" placeholder="请输入年级"></el-input>
          </el-form-item>
          <el-form-item label="班级：" prop="class" class="fl">
            <el-input size="mini" v-model="data.class" :disabled="true" autocomplete="off" placeholder="请输入班级"></el-input>
          </el-form-item>
        </section>
        <section class="clear">
          <el-form-item label="学历层次：" prop="educationLevel" class="w450 fl">
            <el-input size="mini" v-model="data.educationLevel" autocomplete="off" placeholder="请输入学历层次"></el-input>
          </el-form-item>
          <el-form-item label="学制：" prop="studentLength" class="fl">
            <el-input size="mini" v-model="data.studentLength" autocomplete="off" placeholder="请输入学制"></el-input>
          </el-form-item>
        </section>

        <div style="color: #333;font-size: 16px;margin-bottom: 10px;">本人联系信息</div>
        <section class="clear">
          <el-form-item label="本人电话：" prop="phone" class="w450 fl">
            <el-input size="mini" v-model="data.phone" autocomplete="off" placeholder="请输入本人电话"></el-input>
          </el-form-item>
          <el-form-item label="微信号：" prop="wechat" class="fl">
            <el-input size="mini" v-model="data.wechat" autocomplete="off" placeholder="请输入微信号"></el-input>
          </el-form-item>
        </section>
        <section class="clear">
          <el-form-item label="邮箱：" prop="email" class="w450 fl">
            <el-input size="mini" v-model="data.email" autocomplete="off" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="QQ：" prop="qq" class="fl">
            <el-input size="mini" v-model="data.qq" autocomplete="off" placeholder="请输入QQ"></el-input>
          </el-form-item>
        </section>

        <div style="color: #333;font-size: 16px;margin-bottom: 10px;">家庭信息</div>
        <section class="clear">
          <el-form-item label="家庭联系人：" prop="homeContact" class="w450 fl">
            <el-input size="mini" v-model="data.homeContact" autocomplete="off" placeholder="请输入家庭联系人"></el-input>
          </el-form-item>
          <el-form-item label="家庭电话：" prop="homePhone" class="fl">
            <el-input size="mini" v-model="data.homePhone" autocomplete="off" placeholder="请输入家庭电话"></el-input>
          </el-form-item>
        </section>
        <section class="clear">
          <el-form-item label="家庭地址：" prop="homeAddress" class="w450 fl">
            <el-input size="mini" v-model="data.homeAddress" autocomplete="off" placeholder="请输入家庭地址"></el-input>
          </el-form-item>
          <el-form-item label="家庭邮编：" prop="homePostcode" class="fl">
            <el-input size="mini" v-model="data.homePostcode" autocomplete="off" placeholder="请输入家庭邮编"></el-input>
          </el-form-item>
        </section>
      </el-form> -->
      <!-- <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="show = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="saveInfo('data')">保 存</el-button>
      </div> -->
      <div class="contentClass onlyShowContent" id="adminStudentContent">
        <div>
          <div class="clearFix p10">
            <div class="fl">
              <el-upload style="" disabled class="avatar-uploader" action="" :show-file-list="false">
                <img :src="generateImgUrl(data.otherData.picUrl)" class="avatar">
              </el-upload>
              <div class="pic-title">入学照片</div>
            </div>
            <div class="fl ml20">
              <el-upload style="" disabled class="avatar-uploader" action="" :show-file-list="false">
                <img :src="generateImgUrl(data.studentBasic.lifeHeadUrl)" class="avatar">
              </el-upload>
              <div class="pic-title">生活照片</div>
            </div>
          </div>
          <div>
            <h4>基本信息</h4>
            <el-row :gutter="80" class="mt10">
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>学号</p>
                  <el-input v-model="data.studentBasic.sn" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>姓名</p>
                  <el-input v-model="data.studentBasic.name" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>曾用名</p>
                  <el-input v-model="data.studentBasic.formerName" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>性别</p>
                  <el-input v-model="data.studentBasic.gender" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>民族</p>
                  <el-input v-model="data.studentBasic.nation" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>籍贯</p>
                  <el-input v-model="data.studentBasic.nationality" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>政治面貌</p>
                  <el-input v-model="data.studentBasic.politicsStatus" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>籍贯</p>
                  <el-input v-model="data.studentBasic.nativePlace" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>身份证号</p>
                  <el-input v-model="data.studentBasic.idNumber" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>出生日期</p>
                  <el-input v-model="data.studentBasic.birthDate" placeholder="" size="small" :disabled="true" suffix-icon="el-icon-date"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>健康状况</p>
                  <el-input v-model="data.studentBasic.healthState" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>血型</p>
                  <el-input v-model="data.studentBasic.bloodType" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>宗教信仰</p>
                  <el-input v-model="data.studentBasic.religion" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>现在户口所在地</p>
                  <el-input v-model="data.studentBasic.currentDomicilePlace" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>火车乘车区间</p>
                  <el-input v-model="data.studentBasic.rideRange" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>婚姻状况</p>
                  <el-input v-model="data.studentBasic.maritalStatus" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>与学校联名银行卡账户</p>
                  <el-input v-model="data.studentBasic.openingBank" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>银行卡号</p>
                  <el-input v-model="data.studentBasic.bankCard" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>特长爱好</p>
                  <el-input v-model="data.studentBasic.hobby" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>校园一卡通卡号</p>
                  <el-input v-model="data.studentBasic.metroCard" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>辅导员姓名</p>
                  <el-input v-model="data.otherData.instructorName" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>班主任姓名</p>
                  <el-input v-model="data.otherData.classTeacher" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>身高（cm）</p>
                  <el-input v-model="data.studentBasic.stature" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8" class="mt20">
                <div class="grid-content bg-purple">
                  <p>体重（kg）</p>
                  <el-input v-model="data.studentBasic.weight" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
            </el-row>

            <h4 class="mt20">学籍信息</h4>
            <el-row :gutter="80" class="mt10">
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>所属学院</p>
                  <el-input v-model="data.studentEducation.collegeName" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>所属专业</p>
                  <el-input v-model="data.studentEducation.majorName" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>所属年级</p>
                  <el-input v-model="data.studentEducation.grade" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="80" class="mt20">
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>所属班级</p>
                  <el-input v-model="data.studentEducation.className" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>生源类型</p>
                  <el-input v-model="data.studentEducation.sourceType" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>学籍状态</p>
                  <el-input v-model="data.studentEducation.educationStatus" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="80" class="mt20">
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>学生类型</p>
                  <el-input v-model="data.studentEducation.education" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>是否在籍</p>
                  <el-input v-model="data.studentEducation.absentee" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>是否在校</p>
                  <el-input v-model="data.studentEducation.atSchool" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="80" class="mt20">
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>毕业时间（预计）</p>
                  <el-input v-model="data.studentEducation.graduateDate" placeholder="" size="small" :disabled="true" suffix-icon="el-icon-date"></el-input>
                </div>
              </el-col>
            </el-row>
            <h4 class="mt20">入学信息</h4>
            <el-row :gutter="80" class="mt10">
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>入学年月</p>
                  <el-input v-model="data.studentEducation.enterDate" placeholder="" size="small" :disabled="true" suffix-icon="el-icon-date"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>入学前户口所在地</p>
                  <el-input v-model="data.studentEducation.domicilePlace" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>生源地</p>
                  <el-input v-model="data.studentEducation.sourcePlace" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="80" class="mt10">
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>入学前就读中学</p>
                  <el-input v-model="data.studentEducation.highSchool" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>高考分数</p>
                  <el-input v-model="data.studentEducation.satScores" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>邮寄录取通知书家庭地址</p>
                  <el-input v-model="data.studentEducation.mailHomeAddress" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>邮寄录取通知书收件人姓名</p>
                  <el-input v-model="data.studentEducation.addresseeName" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>邮寄录取通知书收件人电话</p>
                  <el-input v-model="data.studentEducation.addresseePhone" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
            </el-row>
            <h4 class="mt20">通讯信息</h4>
            <el-row :gutter="80" class="mt10">
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>宿舍分布区</p>
                  <el-input v-model="data.otherData.dormitoryArea" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>寝室号</p>
                  <el-input v-model="data.otherData.dorm" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>联系电话</p>
                  <el-input v-model="data.studentContact.phone" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="80" class="mt20">
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>备用电话</p>
                  <el-input v-model="data.studentContact.standbyPhone" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>微信号</p>
                  <el-input v-model="data.studentContact.wechat" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>QQ号码</p>
                  <el-input v-model="data.studentContact.qq" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="80" class="mt20">
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>邮箱</p>
                  <el-input v-model="data.studentContact.email" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>家庭电话</p>
                  <el-input v-model="data.studentContact.familyPhone" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>家庭电子邮箱</p>
                  <el-input v-model="data.studentContact.familyEmail" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="80" class="mt20">
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>家庭所在地区</p>
                  <el-input v-model="data.studentContact.familyPlace" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <p>家庭详细地址</p>
                  <el-input v-model="data.studentContact.familyDetailAddress" placeholder="" size="small" :disabled="true"></el-input>
                </div>
              </el-col>
            </el-row>
            <h4 class="mt20">家庭信息</h4>
            <el-row :gutter="80" class="mt10">
              <el-col :span="24">
                <div class="grid-content bg-purple">
                  <p>父母类</p>
                  <relational-table :datas="data.studentParents" />
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="80" class="mt10">
              <el-col :span="24">
                <div class="grid-content bg-purple">
                  <p>直系亲属类</p>
                  <relational-table :datas="data.studentrelatives" />
                </div>
              </el-col>

            </el-row>
            <el-row :gutter="80" class="mt10">
              <el-col :span="24">
                <div class="grid-content bg-purple">
                  <p>其他社会重要联系人类</p>
                  <relational-table :datas="data.studentFriends" />
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import defaultPic from '@/assets/images/defaultPic.png'
import { people } from '@/api/index'
import { _checkIdNum, _checkQQ, _checkSn, _checkMobilePhone } from '@/tools/utils'
import RelationalTable from '../../components/relationalTable'

export default {
  name: 'studentInfo',
  props: {
    type: {
      type: String
    },
    data: {
      type: Object
    },
    show: {
      type: Boolean
    },
    changeStatus: {
      type: Function
    },
    loadStudents: {
      type: Function
    }
  },
  data () {
    return {
      nations: [],
      politicStatus: [],
      provinces: [],
      campus: [],
      idTypes: [
        {
          id: 1,
          name: '身份证'
        }, {
          id: 2,
          name: '护照'
        }
      ],
      genderOption: [{
        label: '男',
        value: 1
      }, {
        label: '女',
        value: 2
      }],
      rulesInfo: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        sn: [
          { required: true, message: '请输入学号', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' },
          { validator: _checkSn, trigger: 'blur' }
        ],
        role: [
          { required: true, message: '请输入角色', trigger: 'blur' }
        ],
        idNumber: [
          { validator: _checkIdNum, trigger: 'blur' }
        ],
        qq: [
          { validator: _checkQQ, trigger: 'blur' }
        ],
        religion: [
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        dietaryHabit: [
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        hobby: [
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        dorm: [
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        educationLevel: [
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        studentLength: [
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        wechat: [
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        phone: [
          { validator: _checkMobilePhone, trigger: 'blur' }
        ],
        email: [
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
          { min: 1, max: 40, message: '长度在 1 到 40 个字符', trigger: 'blur' }
        ],
        homeContact: [
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        homePhone: [
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        homeAddress: [
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
        ],
        homePostcode: [
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    isDisabled: function () {
      if (this.type === 'view') {
        return true
      } else {
        return false
      }
    },
    title: function () {
      if (this.type === 'create') {
        return '新增学生'
      } else if (this.type === 'update') {
        return '修改学生'
      } else if (this.type === 'view') {
        return '学生信息'
      }
    }
  },
  created () {
    this.getNations()
    this.getPoliticStatus()
    this.getProvinces()
    this.getCampus()
  },
  methods: {
    generateImgUrl (param) {
      // return param ? `./api/common/getHeadPic?picUrl=${param}` : defaultPic
      return param ? `/fastdfs-util/api/fastdfs/download/image?filePath=${param}` : defaultPic
    },

    // 民族
    getNations () {
      return people()._getNations().then((res) => {
        if (res.status) {
          this.nations = res.data
        } else {
          this.$message.error(res.message)
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    },
    // 政治面貌
    getPoliticStatus () {
      return people()._getPoliticStatus().then((res) => {
        if (res.status) {
          this.politicStatus = res.data
        } else {
          this.$message.error(res.message)
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    },
    // 省份
    getProvinces () {
      return people()._getProvinces().then((res) => {
        if (res.status) {
          this.provinces = res.data
        } else {
          this.$message.error(res.message)
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    },
    // 校区
    getCampus () {
      return people()._getCampus().then((res) => {
        if (res.status) {
          this.campus = res.data
        } else {
          this.$message.error(res.message)
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    },
    saveInfo (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.type === 'create') {
            people()._addOrUpdate({
              sn: this.data.sn,
              classId: this.data.classId,
              picUrl: this.data.picUrl,
              name: this.data.name,
              gender: this.data.gender,
              nationId: this.data.nationId,
              politicalStatus: this.data.politicalStatus,
              nativePlaceId: this.data.nativePlaceId,
              idType: this.data.idType,
              idNumber: this.data.idNumber,
              religion: this.data.religion,
              birthDate: this.data.birthDate,
              dietaryHabit: this.data.dietaryHabit,
              enterDate: this.data.enterDate,
              campusId: this.data.campusId,
              graduateDate: this.data.graduateDate,
              hobby: this.data.hobby,
              dorm: this.data.dorm,
              educationLevel: this.data.educationLevel,
              studentLength: this.data.studentLength,
              phone: this.data.phone,
              wechat: this.data.wechat,
              email: this.data.email,
              qq: this.data.qq,
              homeContact: this.data.homeContact,
              homePhone: this.data.homePhone,
              homeAddress: this.data.homeAddress,
              homePostcode: this.data.homePostcode
            }).then((res) => {
              if (res.status) {
                this.$message.success('学生新建成功')
                this.show = false
                this.loadStudents()
              } else {
                this.$message.error(res.message)
              }
            }).catch((err) => {
              this.$message.error(err)
            })
          } else if (this.type === 'update') {
            people()._addOrUpdate({
              id: this.data.id,
              sn: this.data.sn,
              classId: this.data.classId,
              picUrl: this.data.picUrl,
              name: this.data.name,
              gender: this.data.gender,
              nationId: this.data.nationId,
              politicalStatus: this.data.politicalStatus,
              nativePlaceId: this.data.nativePlaceId,
              idType: this.data.idType,
              idNumber: this.data.idNumber,
              religion: this.data.religion,
              birthDate: this.data.birthDate,
              dietaryHabit: this.data.dietaryHabit,
              enterDate: this.data.enterDate,
              campusId: this.data.campusId,
              graduateDate: this.data.graduateDate,
              hobby: this.data.hobby,
              dorm: this.data.dorm,
              educationLevel: this.data.educationLevel,
              studentLength: this.data.studentLength,
              phone: this.data.phone,
              wechat: this.data.wechat,
              email: this.data.email,
              qq: this.data.qq,
              homeContact: this.data.homeContact,
              homePhone: this.data.homePhone,
              homeAddress: this.data.homeAddress,
              homePostcode: this.data.homePostcode
            }).then((res) => {
              if (res.status) {
                this.$message.success('学生信息修改成功')
                this.show = false
                this.loadStudents()
              } else {
                this.$message.error(res.message)
              }
            }).catch((err) => {
              this.$message.error(err)
            })
          }
        } else {
          return false
        }
      })
    },
    handleAvatarSuccess (res, file) {
      this.data.picUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 2

      if (file.type !== 'image/png' && file.type !== 'image/jpeg' && file.type !== 'image/jpg') {
        this.$message.error('上传头像图片只能是 JPG|JPEG|PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
    },
    clearStudentInfo (formName) {
      // this.$refs[formName].resetFields()
    }
  },
  components: {
    RelationalTable
  }
}
</script>
<style lang="less" scoped>
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  margin-right: 10px;
  color: #8c939d;
  width: 120px;
  height: 165px;
  line-height: 165px;
  text-align: center;
  border: 1px solid #eee;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar {
  width: 120px;
  height: 165px;
  display: block;
}
</style>
